<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
          <div id="quan"> <input type="checkbox"><strong>全选</strong><span>不全选</span></div>
        <div><input type="checkbox">1</div>
        <div><input type="checkbox">2</div>
        <div><input type="checkbox">3</div>
        <div><input type="checkbox">4</div>
        <div><input type="checkbox">5</div>
    </div>
    <script>
        window.onload = function() {
        var oInput = document.getElementsByTagName("input");
        var oRevPick = document.getElementById("quan").getElementsByTagName("span")[0];
        for (var i=1;i<oInput.length;i++) {
            oInput[i].index = i;
            oInput[0].onmouseup = function() {
                var oChange = document.getElementById("quan").getElementsByTagName("strong")[0];
                if (this.checked == true) {
                    oChange.innerHTML = " 全选";
                    for (i=1;i<oInput.length;i++) {
                        oInput[i].checked = false;
                    }
                }
                else {
                    oChange.innerHTML = " 全不选";
                    for (i=1;i<oInput.length;i++) {
                        oInput[i].checked = true;
                    }
                }
            }
            

           
        }
    }
    </script>
</body>
</html>